* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

div {
  width: 180px;
  height: 300px;
  border: 2px solid #DCDFE6;
  margin: 100px auto;
  background-image: url(img/1.jpg);
  animation: person 2s step-end infinite;
  /* step-end立马跳到下一帧*/
}

@keyframes person {
  0% {
    background-position: left top;
  }

  14% {
    background-position: -180px top;
  }

  28% {
    background-position: -360px top;
  }

  42% {
    background-position: -540px top;
  }

  56% {
    background-position: -720px top;
  }

  70% {
    background-position: -900px top;
  }

  84% {
    background-position: -1080px top;
  }

  100% {
    background-position: -1260px top;
  }
}